<template>
	<div class="my_video_play" :style="{'background-image':'url('+imgUrl + item.video_img+')','background-repeat':'no-repeat','background-size':'100% 100%'}">
		<video
			ref="videoRef"
			preload="metadata"
      webkit-playsinline="true"
      playsinline="true"
			@ended="videoPlay = false"
			@pause="videoPlay = false"
			@canplay="videoCanPlay"
			@timeupdate="videoTimeUpdate"
		>
			<source :src="imgUrl + item.video_url" type="video/mp4" />
		</video>
		<!-- 控件层 -->
		<div v-show="state.videoOverlayShow" class="video_mask" @click="videoMaskClick">
			<!-- 播放按钮 -->
			<img v-show="!videoPlay" class="vider_playicon" src="@/assets/img/play.png" @click.stop="videoClick" />
			<!-- 进度条 -->
			<van-slider
				class="video_slider"
				v-model="state.sliderValue"
				bar-height="1px"
				active-color="#F6438A"
				@drag-start="state.startDrag = true"
				@change="videoSilderChange"
				:disabled="!videoPlay"
			>
				<template #button>
					<div v-show="videoPlay" class="custom-button"></div>
				</template>
			</van-slider>
		</div>
	</div>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue';
import showVideo from '@/hooks/showVideo';

defineProps<{
	item: any;
  page: string;
}>();

const emit = defineEmits<{
	(event: 'videoClick'): void;
}>();

interface IStateData {
	videoOverlayShow: boolean;
	videoTotalTime: string;
	sliderValue: number;
	startDrag: boolean;
}

const imgUrl = import.meta.env.VITE_IMG_URL;
const state: IStateData = reactive({
	videoOverlayShow: true,
	videoTotalTime: '',
	sliderValue: 0,
	startDrag: false
});

// 当前视频 dom
const videoRef = ref<HTMLVideoElement | null>(null);

// 视频遮罩点击
const videoMaskClick = () => {
	// 暂停视频
	videoRef.value?.pause();
};

// 播放图标点击
const videoPlay = ref<boolean>(false);
const videoClick = () => {
	emit('videoClick');
};

const play = () => {
	videoRef.value?.play();
	videoPlay.value = true;
};

// 获取视频总长度
const videoCanPlay = () => {
	state.videoTotalTime = videoRef.value?.duration.toFixed(2) as string;
};

// 设置进度条
const videoTimeUpdate = () => {
	const time = Number(videoRef.value?.currentTime.toFixed(2));
	// 拖动暂停
	if (!state.startDrag) {
		state.sliderValue = Number(((time / Number(state.videoTotalTime)) * 100).toFixed(0));
	}
};

// 拖动进度条
const videoSilderChange = (value: number) => {
	const silderTime = ((value * Number(state.videoTotalTime)) / 100).toFixed(2);
	videoRef.value!.currentTime = Number(silderTime);
	state.startDrag = false;
};

defineExpose({ videoRef, play });
</script>

<style lang="scss" scoped>
.my_video_play {
	position: relative;
	height: 100%;
	border-radius: 15px;
	overflow: hidden;
  display: flex;
  align-items: center;
	video {
		width: 100%;
		height: auto;
		//height: 100%;
		object-fit: cover;
	}
	.video_mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
		.vider_playicon {
			//position: absolute;
			//top: 48%;
			//left: 50%;
			//transform: translate(-50%);
			width: 45px;
			height: 45px;
			object-fit: cover;
		}
		.video_slider {
			position: absolute;
			bottom: 10px;
			.custom-button {
				width: 10px;
				height: 10px;
				color: #fff;
				font-size: 10px;
				line-height: 18px;
				text-align: center;
				background-color: #f6438a;
				border-radius: 100px;
			}
		}
	}
}
</style>
